<template>
  <div class="bg-gray pt-15">
    <section class="relative min-h-[100vh] flex flex-col bg-white pageItem">
      <!-- 中间 -->
      <section class="flex-1 pb-50 bg-neutral-10">
        <div class="dioa-box pt-10 px-11">
          <div class="dioa-flex flex">
            <div
              class="dioa-flex flex min-w-[280px] pl-7 pr-[22px] h-[62px] text-lg items-center justify-between font-medium bg-red rounded-t-md text-white"
            >
              <div class="dioa-flex flex space-x-3 items-center">
                <i class="iconfont">&#xe90c;</i>
                <p class="dioa-text">分类</p>
              </div>
            </div>
            <div class="dioa-box w-[900px] rounded-md ml-10">
              <el-form ref="form" label-width="0">
                <el-form-item>
                  <el-input
                    placeholder="输入关键词找视频"
                    v-model="searchStr"
                    @input="searchList(searchStr)"
                  >
                    <template #suffix>
                      <i class="iconfont">&#xe6d2;</i>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="dioa-flex flex">
            <div
              class="dioa-box shadow-md rounded-b-lg transition-all duration-300 h-max overflow-hidden w-[280px] mr-10"
            >
              <div class="pt-5 pb-5 bg-white rounded-lg">
                <div class="w-[280px] p-3">
                  <el-menu
                    @select="handleSelct"
                    background-color="#fff"
                    text-color="#000"
                    active-text-color="#fdfdfd"
                  >
                    <!-- <el-menu-item @click="searchList()"
                      ><span class="titlename">全部</span></el-menu-item
                    > -->
                    <template v-for="item in category">
                      <el-menu-item
                        :key="item.id"
                        :index="item.id"
                        v-if="item.children.length == 0"
                        ><span class="titlename">{{
                          item.name ? item.name : item.label
                        }}</span></el-menu-item
                      >
                      <el-sub-menu :key="item.name" :index="item.name" v-else>
                        <template #title>
                          <span class="titlename">{{
                            item.name ? item.name : item.label
                          }}</span>
                        </template>
                        <el-menu-item-group
                          v-for="(v, index) in item.children"
                          :key="index"
                        >
                          <el-menu-item :index="v.id">{{
                            v.name ? v.name : v.label
                          }}</el-menu-item>
                        </el-menu-item-group>
                      </el-sub-menu>
                    </template>
                  </el-menu>
                </div>
              </div>
            </div>
            <div class="dioa-flex flex flex-1 flex-col min-w-0 rightdioa pt-10">
              <div>
                <div
                  class="video-card__list w-full grid gap-x-7 gap-y-8 grid-cols-[repeat(4,minmax(245px,1fr))]"
                >
                  <el-empty :image-size="200" v-if="list.length == 0"></el-empty>
                  <div v-for="item in list" :key="item.id" v-else>
                    <imgView :item="item"></imgView>
                  </div>
                </div>
                <div class="pagenext">
                  <Pagination
                    class="pagination"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="totalItems"
                    @update:current-page="currentPage = $event"
                    @update:page-size="pageSize = $event"
                    @change="loadData"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 中间end -->
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { getTreeList, getMaterialList } from "@/common/listApi";
import { reactive, ref } from "vue";
import imgView from "../components/ItemImg.vue";
import { treeListType } from "@/common/utils/listType";
import { materialListModel } from "@/common/utils/homeTpye";
import Pagination from "../components/Pagination.vue";
const category = ref<treeListType[] | any>([]);
// 下面三个方法是对菜单的操作
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath);
//   if (key) {
//     searchList(key);
//   }
// };

const handleSelct = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
  searchStr.value = "";
  searchList("", key);
};

// 获取treeList
getTreeList().then((res) => {
  let tempdata = [...[{ id: "", name: "全部", children: [] }], ...res.data];
  // console.log(tempdata, "分类");
  category.value = tempdata;
});

// 查询素材列表
const list = ref<materialListModel[] | any>([]);
let currentPage = ref(1);
let pageSize = ref(12);
let totalItems = ref(0); // 假设总数为100
function loadData(str?: string, id?: string) {
  window.scrollTo(0, 0);
  // 加载数据的逻辑
  let temparam = reactive({
    searchValue: str || "",
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    categoryId: "" || id,
  });
  getMaterialList(temparam).then((res) => {
    // console.log(res);
    const tempTotal = res.total + "";
    // console.log(tempTotal);
    totalItems.value = parseInt(tempTotal);
    list.value = res.rows;
  });
}

// 搜索素材
let searchStr = ref("");

function searchList(str?: string, id?: string) {
  currentPage.value = 1;
  // searchStr.value = "";
  loadData(str, id);
}

// home页面过来搜索
const { currentRoute } = useRouter();
const route = currentRoute.value;
// console.log(route.query.param, "参数");
// const param = ref(route.params.param);
if (route.query.param) {
  searchStr.value = route.query.param + "";
  loadData(route.query.param + "");
} else {
  searchList();
}
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}
.pageItem {
  background: #f9f9f9;
}
.search {
  width: 780px;
  background: #fff;
  height: 60px;
  line-height: 60px;

  input {
    margin: 0 120px 0 90px;
    height: 100%;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #efefef;
    padding: 0 20px;
  }

  .leftVideoIco {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 14px;

    i {
      padding-right: 5px;
    }
  }

  .searchBtn {
    width: 120px;

    button {
      background: #c40234;
      display: block;
      width: 100%;
      height: 60px;
      border-radius: 0 4px 4px 0;

      &:hover {
        background: linear-gradient(to right, #f96e92, #c40234);
      }

      img {
        filter: brightness(100);
        margin: auto;
      }
    }
  }
}

.searchtag {
  width: 700px;
  margin: 50px auto;
}

.dioa-box {
  .el-form-item {
    margin-bottom: 0;

    .el-input {
      height: 60px;
      border: 0 !important;

      i {
        font-size: 20px;
        color: #000;
      }
    }
  }
}

.pagenext {
  margin-top: 50px;
}

.el-menu {
  .titlename {
    font-size: 16px;
    font-weight: bold;
  }
  border: none;
  .is-active {
    background: #f5f5f5 !important;
    color: #000 !important;
    font-size: 16px !important;
  }
}
.rightdioa {
  min-height: 600px;
}
</style>
